<!--
导航里的单个路由组件 由 el-menu 菜单内部调用
'/main/dashboard' 为首页不进行菜单渲染
-->
<template>
    <div v-if="null!=item ">
        <template v-if="'/main/dashboard'!=item.absPath">
            <template v-if="(!item.children||item.children.length === 0)">
                <el-menu-item :index="null!=item && item.absPath">
                    <i :class=funIconClass(item.funIcon)></i>
                    <span>{{item.name || ''}}</span>
                </el-menu-item>
            </template>
            <el-submenu v-else :index="null!=item && item.absPath">
                <template slot="title" >
                    <i :class=funIconClass(item.funIcon)></i>
                    <span>{{item.name || ''}}</span>
                </template>
                <template v-for="child in item.children">
                    <navigation-item  v-if="child.children && child.children.length>0"
                                      :item="child"
                                      :key="child.absPath"/>
                    <el-menu-item v-else :key="child.absPath" :index="child.absPath" >
                        <i :class=funIconClass(child.funIcon)></i>
                        <span>{{child.name || ''}}</span>
                    </el-menu-item>
                </template>
            </el-submenu>
        </template>
    </div>
</template>

<script>
    export default {
        name: 'navigationItem',
        data() {
            return {
                defaultIcon: "el-icon-user",
                isActive: true,
                error: null
            }
        },
        props: {
            item: {
                type: Object,
                required: true
            }
        },
        methods: {
            funIconClass(icon) {
                return icon?icon:this.defaultIcon;
            }
        }
    }
</script>